window.onload = function () {
    slider()
}
var sliderDom = $('.slider ul');
var controls = $('.slider ol li');
var index = 0;

function slider () {
    console.log(controls)

    // 定时器动画
    var timer1 = setInterval(function () {
        index = ++index > 1 ? 0 : index
        console.log(index)
        for (var i=0; i<2; i++) {
            $(controls[i]).removeClass('active')
        }
        animate(index)
    }, 3000)
}

function animate (index) {
    // $(sliderDom).css("margin-left", -900 * index + 'px');
    stepAni(index)
    $(controls[index]).addClass('active')
}
function stepAni (index) {
    var step = 0
    if (index === 1) {
        var timer2 = setInterval(function () {
            step -= 150
            $(sliderDom).css("margin-left", step + 'px');
            console.log('step', step)
            if (step <= -800) {
                clearInterval(timer2)
                $(sliderDom).css("margin-left", '-800px');
            }
        }, 200)
    }
    if (index === 0) {
        step = -900
        var timer2 = setInterval(function () {
            step += 150
            $(sliderDom).css("margin-left", step + 'px');
            console.log('step', step)
            if (step >= 0) {
                clearInterval(timer2)
                $(sliderDom).css("margin-left", 0);
            }
        }, 200)
    }

}